<!--
 * @Author: Sam
 * @Date: 2020-10-26 11:11:25
 * @LastEditTime: 2021-06-28 16:14:34
 * @LastEditors: Sam
 * @Description:
 * @FilePath: \resourcesf:\thework\ygboost-eui\src\components\app\edit\customer\customerGroup\components\TableComponent.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <el-row class="padding-top-sm" :gutter="4">
      <el-col :span="2" style="line-height:28px" class="text-right">
        二级计算值
      </el-col>
      <el-col :span="4">
        <el-input
          type="number"
          v-model="secondFormula"
          size="mini"
          placeholder="价格"
        />
      </el-col>
      <el-col :span="2" style="line-height:28px">
        <i
          class="el-icon-circle-plus text-xl text-green margin-lr-sm pointer"
          title="加"
          @click="batch('add')"
        ></i>
        <i
          class="el-icon-remove text-xl text-yellow pointer"
          title="减"
          @click="batch('remove')"
        ></i>
      </el-col>
    </el-row>
    <el-table
      ref="singleTable"
      class="table-box margin-top"
      :border="true"
      :data="tableInfo"
      style="width: 100%"
      size="mini"
      highlight-current-row
      :header-cell-class-name="tableRowClassName"
      @current-change="handleCurrentChange"
      @header-click="selectCol"
    >
      <el-table-column
        label="分区/计费段"
        prop="partition"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 遍历col -->
      <el-table-column
        v-for="column in tableColumns"
        :key="column.id"
        :prop="`${column.id}`"
        :label="`${column.start} ~ ${column.end} 二级价格`"
      >
        <div slot-scope="scope" class="column-wrapper">
          <!-- <div
          class="column-content auto-fit-target"
          :title="scope.row[scope.column.property]"
        > -->

          <el-row :gutter="10">
            <el-col :span="8">
              {{
              scope.row[scope.column.property].setFormula
              ? scope.row[scope.column.property].setFormula
              : ""
              }}
            </el-col>
            <el-col :span="10">
              <el-input-number
                :controls="false"
                size="mini"
                style="width:100%"
                v-model="scope.row[scope.column.property].secondFormula"
              ></el-input-number>
            </el-col>
            <el-col :span="6">
              {{
                scope.row[scope.column.property].formula
                  ? scope.row[scope.column.property].formula
                  : ""
              }}
            </el-col>
            <el-col :span="3" style="color: red">
              {{plus}} {{
              formula
              }}

            </el-col>
          </el-row>
          <!-- </div> -->
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { clone } from "@/utils/clone";
export default {
  data() {
    return {
      tableInfo: [],
      selectProp: "",
      setFormula: "",
      secondFormula: '',
      currentRow: "",
      oldTableInfo: [],
      plus: "+",
    };
  },
  props: {
    tableColumns: {
      type: Array,
      // 表格头部信息
      default: function() {
        return [];
      }
    },
    tableData: {
      type: Array,
      // 表格数据
      default: function() {
        return [];
      }
    },
    channelFormulaMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    customerGroupVipPriceMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    secondcustomerGroupVipPriceMap: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    countrys: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    countryStates: {
      type: Object,
      default: function(params) {
        return {};
      }
    },
    formula: {
      type: Object,
      default: function(params) {
        return {};
      }
    }
  },
  watch: {
    tableData: {
      handler(val) {
        this.tableFn();
      },
      immediate: true
    }
  },
  mounted() {
    if (this.formula<0){
      this.plus = "";
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
      this.selectProp = "";
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === this.selectProp) {
        return "success-row";
      }
      return "";
    },
    selectCol(column, event) {
      this.currentRow = "";
      this.$refs.singleTable.setCurrentRow(1);
      this.selectProp = column.property;
      console.log("this.selectProp :>> ", this.selectProp);
    },
    batch(type) {
      if (!this.secondFormula) {
        this.$message.error("请输入二级计算值");
        return;
      }
      if (!this.selectProp && !this.currentRow) {
        this.$message.error(
          "请选择要计算单单元格,单击表头选中当前列,单击区/重量全选"
        );
        return;
      }

      const data = clone(this.tableInfo);

      for (const i of data) {
        // 全部赋值
        if (this.selectProp === "partition") {
          for (const j in i) {
            if (j !== "partition") {
              if (type == "add") {
                i[j].secondFormula =
                  (Number(i[j].secondFormula) * 1000 +
                    Number(this.secondFormula) * 1000) /
                  1000;
              } else if (type == "remove") {
                i[j].secondFormula =
                  (Number(i[j].secondFormula) * 1000 -
                    Number(this.secondFormula) * 1000) /
                  1000;
              }
            }
          }
        } else if (this.selectProp) {
          // 列赋值
          if (type == "add") {
            i[this.selectProp].secondFormula =
              (Number(i[this.selectProp].secondFormula) * 1000 +
                Number(this.secondFormula) * 1000) /
              1000;
          } else if (type == "remove") {
            i[this.selectProp].secondFormula =
              (Number(i[this.selectProp].secondFormula) * 1000 -
                Number(this.secondFormula) * 1000) /
              1000;
          }
        } else if (
          this.currentRow &&
          i.partition === this.currentRow.partition
        ) {
          // 行赋值
          for (const j in i) {
            if (j !== "partition") {
              if (type == "add") {
                i[j].secondFormula =
                  (Number(i[j].secondFormula) * 1000 +
                    Number(this.secondFormula) * 1000) /
                  1000;
              } else if (type == "remove") {
                i[j].secondFormula =
                  (Number(i[j].secondFormula) * 1000 -
                    Number(this.secondFormula) * 1000) /
                  1000;
              }
            }
          }
        }
      }

      this.tableInfo = data;
    },

    tableFn() {
      const arr = [];

      for (const i of this.tableData) {
        const subareaArr = [];
        const formulaObj = {};
        for (const k of i.subareaDetails) {
          subareaArr.push(
            k.countryId
              ? this.countrys[k.countryId]
              : this.countryStates[k.stateId]
          );
        }
        for (const j of this.tableColumns) {
          formulaObj[j.id] = this.channelFormulaMap[`${i.id}_${j.id}`];
          formulaObj[j.id].subareaId = i.id;
          formulaObj[j.id].chargingSectionId = j.id;
          if (this.customerGroupVipPriceMap) {
            formulaObj[j.id].setFormula =
              this.customerGroupVipPriceMap[`${i.id}_${j.id}`] &&
              this.customerGroupVipPriceMap[`${i.id}_${j.id}`].formula
                ? this.customerGroupVipPriceMap[`${i.id}_${j.id}`].formula
                : 0;
          } else {
            formulaObj[j.id].setFormula = 0;
          }
          if (this.secondcustomerGroupVipPriceMap) {
            formulaObj[j.id].secondFormula =
              this.secondcustomerGroupVipPriceMap[`${i.id}_${j.id}`] &&
              this.secondcustomerGroupVipPriceMap[`${i.id}_${j.id}`].formula
                ? this.secondcustomerGroupVipPriceMap[`${i.id}_${j.id}`].formula
                : 0;
          } else {
            formulaObj[j.id].secondFormula = 0;
          }
        }

        formulaObj["partition"] = subareaArr.toString();
        arr.push(formulaObj);
      }
      this.tableInfo = arr;
      this.oldTableInfo = clone(arr);
    }
  }
};
</script>
